<!DOCTYPE html>
<html>
<head>
    <title>Tina's Playground - 初始化设置</title>
    <link rel="stylesheet" href="../style.css">
</head>
<body class="welcome-page">
    <div class="welcome-container">
        <div class="welcome-card animate-pop">
            <h1>🎨 欢迎使用Tina's Playground! 🎉</h1>
            <div class="tips">
                <p>✨ 首次使用需要配置LLM参数</p>
                <p>🔑 参数获取方法参考<a href="#" class="docs-link">文档</a></p>
            </div>
            
            <form id="configForm" class="config-form">
                <div class="form-group">
                    <label>
                        <span class="label-icon">🔑</span> API Key:
                        <input type="password" name="api_key" required>
                    </label>
                </div>
                
                <div class="form-group">
                    <label>
                        <span class="label-icon">🤖</span> 模型名称:
                            <input type="text" name="model_name" required>
                    </label>
                </div>

                <div class="form-group">
                    <label>
                        <span class="label-icon">🌐</span> API地址:
                        <input type="url" name="base_url" required>
                    </label>
                </div>

                <div class="form-group">
                    <label>
                        <span class="label-icon">📏</span> 最大输入长度:
                        <input type="number" name="max_input" value="4096" min="512" required>
                    </label>
                </div>

                <button type="submit" class="submit-btn">🚀 开始旅程</button>
            </form>
            
            <div class="loading hidden" id="loading">
                <div class="spinner"></div>
                <p>正在初始化魔法阵...</p>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('configForm').onsubmit = async (e) => {
            e.preventDefault();
            
            const formData = {
                api_key: e.target.api_key.value,
                model_name: e.target.model_name.value,
                base_url: e.target.base_url.value,
                max_input: e.target.max_input.value
            };

            const loading = document.getElementById('loading');
            const submitBtn = document.querySelector('.submit-btn');
            
            submitBtn.disabled = true;
            loading.classList.remove('hidden');

            try {
                const response = await fetch('/configllm', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(formData)
                });

                const result = await response.json();
                if (result.error) {
                    alert(`配置失败: ${result.error}`);
                } else {
                    window.location.reload(); // 刷新进入主界面
                }
            } catch (err) {
                alert('网络请求失败: ' + err.message);
            } finally {
                submitBtn.disabled = false;
                loading.classList.add('hidden');
            }
        };
    </script>
</body>
</html>
